<template>
  <div>
    <el-select 
        multiple 
        v-model="selectNameMap" 
        ref="inputBox"
        size="small" 
        @focus="focus"
        :readonly="$attrs.readonly"
        :disabled="$attrs.disabled"
        clearable 
        :placeholder="$attrs.placeholder"
        :style="'width:' + width + 'px'"
        class="select" 
        @change="selectChange"
        @remove-tag="removeTag"
        @clear="clearList"
        value-key='name'
      >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
    <div v-if='visible'>
       <DepartmentDialog ref='getDepartmen' @updateTag="updateTag" @departmenInfo="info" :tagsList="tagsList" :multiple="multiple" @closeDialog="visible = false"/>
    </div>
  </div>
</template>

<script>
import DepartmentDialog from './DepartmentDialog.vue'
import { getUserProfile } from "@/api/system/user";
import {geDeptList} from '@/api/custom/formDesigner'
export default {
  name: "DepartmentSelection",
  components: {
    DepartmentDialog,
  },
  data() {
    return {
      tagsList: [],
      selectNameMap:[],
      width: this.$attrs.maxLength,
      visible:false,
      options: [],
      style:this.clearable?'position: absolute;top: 11px;right: 8px;color: darkgrey;cursor: pointer;':'display:none'
    }
  },
  props:['multiple','dialogIsShow','defaultValueKey','value','clearable','readonly','pageFlag'],
  created () {
    this.getAllDepart()
    //预设值时，新增进来应该有数据，设计界面也应该有数据
    if (this.pageFlag === 'edit'|| this.pageFlag === 'view') {
    //   this.tagsList = [];
        // this.getDepartList()
    } else {
        if(this.defaultValueKey==='presetValue'){
            getUserProfile().then(response => {
                this.selectNameMap = []
                console.log(response)
                this.selectNameMap.push(response.data.dept.id)
                this.tagsList.push(response.data.dept.id)
                this.$emit('input', this.selectNameMap)
                this.$emit('change', this.selectNameMap)
            })
        }  
    }
  },
  watch:{
    multiple(){
      // this.tagsList=[]
      // this.selectNameMap= []
    },
    dialogIsShow(){
      if(this.dialogIsShow){
        this.visible= true
      }
    },
    defaultValueKey(){
        this.changeValue()
    },
    clearable(){
      if(this.clearable){
          this.style='position: absolute;top: 11px;right: 8px;color: darkgrey;cursor: pointer '
      }else{
        this.style='display:none'
      }
    },
    tagsList(){
      // this.$emit('input', this.selectNameMap)
      // this.$emit('change', this.selectNameMap)
    },
  },
  methods: {
    clearList () {
        this.tagsList = []
    },
    getAllDepart () {
        geDeptList([]).then(res => {
            this.options = [...res.data] || []
            if(Array.isArray(this.value)){
              console.log(this.value)
              if(isNaN(this.value[0])){
              let arr = [];
             this.options.map(item=>{
                if(this.value.includes(item.name)){
                  arr.push(item.id);
                }
              })
              this.selectNameMap = arr;
            }else{
              const xx = this.value.map(item => {
                return Number(item)
               })
            this.selectNameMap = [...xx]
            }
            this.tagsList.push(...this.value)
            }
            
        })
    },
    getDepartList () {
        // 接口查询部门信息
        geDeptList(this.selectNameMap).then(res => {
            this.tagsList = [...res.data]
        })
    },
    changeValue () {
        const _this=this
        if(this.defaultValueKey==='presetValue'){
            getUserProfile().then(response => {
                _this.selectNameMap = []
                _this.selectNameMap.push(response.data.dept.id)
                _this.tagsList.push(response.data.dept)
            })
        }else{ 
            this.tagsList=[]
            this.selectNameMap= []
        }
    },
    clear(){
      this.tagsList=[]
      this.selectNameMap= []
      this.$emit('input', this.selectNameMap)
      this.$emit('change', this.selectNameMap)
    },
     removeTag(val){
      if(typeof this.tagsList[0]==='object'){
                let arr = this.tagsList.filter((item)=>{
              return item.id !== val;
            });
            this.tagsList = arr;
            }else{
                let arr = this.tagsList.filter((item)=>{
                  return item !== val;
            });
            this.tagsList = arr;
            }
    },
    selectChange(val){
      this.selectNameMap= val
      this.$emit('input', this.selectNameMap)
      this.$emit('change', this.selectNameMap)
    },
    info(data) {
      // this.tagsList = data;
      this.selectNameMap=data?.map(item=>item.id)
      this.tagsList = data?.map(item=>item.id);
       this.$emit('input', this.selectNameMap)
      this.$emit('change', this.selectNameMap)
      // this.getDepartList()
    },
    focus() {
      this.$refs.inputBox.blur()
      if(this.readonly) return
      this.visible=true
    },
    handleClose(tag) {
      this.tagsList.splice(this.tagsList.includes(tag), 1);
    },
    updateTag(arr){
      console.log(this.tagsList)
      this.tagsList = arr;
    }
  },
};
</script>

<style lang='less' scoped>
    .selectStyle{
        display: flex;
        width: 100%;
    }
    .inputSelect{
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #FFFFFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding: 0 15px;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
    }
    .selectStyle .el-tag+.el-tag{
        margin-left: 10px;
    }
    /deep/ .el-select{
      width: 100%;
    }
    .el-icon-caret-top:before {
      content: '';
    }
</style>
